<template>
  <div>
    <!-- 导航栏 -->
    <div>
      <van-nav-bar
        title="常用地址"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <!-- 数据列表 -->
    <div class="dataList">
      <van-cell
        :title="address.name + '  ' + address.tel"
        :label="
          address.province + address.city + address.area + address.address
        "
        v-for="address in addressList1"
        :key="address.id"
      >
        <template #right-icon>
          <van-icon name="edit" @click="redact(address)" size="25" />
        </template>
      </van-cell>
      <div class="newButton">
        <!-- 新增地址 -->
        <van-button round type="info" native-type="submit" @click="newAddress"
          >新增地址</van-button
        >
        <!-- 新增地址底部弹出窗 -->
        <van-action-sheet v-model="show2" title="新增地址">
          <van-field v-model="addressName2" label="姓名" />
          <van-field v-model="addressTel2" label="电话" />
          <van-field
            v-model="addressAreazz2"
            label="地区选择"
            readonly
            @click="Toshowaddress2"
          />
          <van-field v-model="addressAreaxx2" label="详细地址" />
          <!-- 新增地址的地址选择器 -->
          <van-popup
            v-model="show3"
            position="bottom"
            :style="{ height: '30%' }"
          >
            <van-area title="标题" :area-list="areaList" @confirm="onConfirm2"
          /></van-popup>
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="toChangeaddress2"
            >提交</van-button
          >
        </van-action-sheet>
      </div>
      <!-- 编辑地址 -->
      <van-action-sheet v-model="show" title="编辑地址">
        <van-field v-model="addressName" label="姓名"   placeholder="请输入姓名"/>
        <van-field v-model="addressTel" label="电话"  placeholder="请输入手机号码"/>
        <van-field
          v-model="addressAreazz"
          label="地区选择"
          readonly
          @click="Toshowaddress"
        />
        <van-field v-model="addressAreaxx" label="详细地址"   placeholder="请输入详细地址"/>
      <!-- 编辑地址的地址选择器 -->
        <van-popup v-model="show1" position="bottom" :style="{ height: '30%' }">
          <van-area title="标题" :area-list="areaList" @confirm="onConfirm"
        /></van-popup>
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @click="toChangeaddress"
          >提交</van-button
        >
      </van-action-sheet>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios";
import { areaList } from "@vant/area-data";
import { Notify } from 'vant';
export default {
  data() {
    return {
      addressList1: [],
      addressData: [],
      //编辑地址数据
      show: false,
      addressName: "",
      addressTel: "",
      addressArea: "",
      addressAreaxx: "",
      addressCity: "",
      addressProvince: "",
      addressAreazz: "",
      areaList,
      show1: false,
      pcaAddress: "",
      addressId: "",
      //新建地址数据
      show2: false,
      addressName2: "",
      addressTel2: "",
      addressArea2: "",
      addressAreaxx2: "",
      addressCity: "",
      addressProvince2: "",
      show3: false,
      addressAreazz2: "北京市-北京市-东城区",
    };
  },
  methods: {
    //获取数据
    async getAllAddressData() {
      let data = {
        page: 1,
        pageSize: 10,
      };
      let res = await get("/address/pageQuery", data);
      this.addressData = res.data.data.list;
    },
    //路由回退
    onClickLeft() {
      this.$router.go(-1);
    },
    //渲染数据到列表中
    addressList() {
      //设置延时器 刷新和第一次进页面在读取数据之后再渲染
      setTimeout(() => {
        let addressArr = this.addressData;
        if (!addressArr) {
          return;
        }
        addressArr.forEach((item, index) => {
          let addressObj = {};
          (addressObj.id = item.id),
            (addressObj.name = item.username),
            (addressObj.tel = item.telephone),
            (addressObj.address = item.address),
            (addressObj.province = item.province),
            (addressObj.city = item.city),
            (addressObj.area = item.area),
            (addressObj.isDefault = item.isDefault);
          this.addressList1.push(addressObj);
        });
      }, 200);
      // 筛选地址数据 生成匹配组件的数据
    },
    //将获得的地址转化为文本框读取的
    redact(addressItem) {
      this.show = true;
      this.addressId = addressItem.id;
      this.addressName = addressItem.name;
      this.addressTel = addressItem.tel;
      this.addressAreaxx = addressItem.address;
      this.addressArea = addressItem.area;
      this.addressCity = addressItem.city;
      this.addressProvince = addressItem.province;
      this.addressAreazz =
        addressItem.province + "-" + addressItem.city + "-" + addressItem.area;
    },
    //通过地址选择器 将选择的地址的值转化到填写栏中 此为编辑地址
    onConfirm(values) {
      this.pcaAddress = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("-");
      this.pcaList = values;
      this.show1 = false;
      this.addressProvince = this.pcaList[0].name;
      this.addressCity = this.pcaList[1].name;
      this.addressArea = this.pcaList[2].name;
      this.addressAreazz =
        this.pcaList[0].name +
        "-" +
        this.pcaList[1].name +
        "-" +
        this.pcaList[2].name;
    },
    //通过地址选择器 将选择的地址的值转化到填写栏中 此为新建地址
    onConfirm2(values) {
      this.pcaAddress = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("-");
      this.pcaList = values;
      this.show3 = false;
      this.addressProvince2 = this.pcaList[0].name;
      this.addressCity2 = this.pcaList[1].name;
      this.addressArea2 = this.pcaList[2].name;
      this.addressAreazz2 =
        this.pcaList[0].name +
        "-" +
        this.pcaList[1].name +
        "-" +
        this.pcaList[2].name;
    },
    //编辑地址的地址选择器方法
    Toshowaddress() {
      this.show1 = true;
    },
    //新建地址的地址选择器方法
    Toshowaddress2() {
      this.show3 = true;
    },
    //发送编辑地址请求
    async toChangeaddress() {
      let data = {
        id: this.addressId,
        username: this.addressName,
        telephone: this.addressTel,
        province: this.addressProvince,
        city: this.addressCity,
        area: this.addressArea,
        address: this.addressAreaxx,
      };
      let res = await post("/address/saveOrUpdate", data);
      this.getAllAddressData();
      (this.addressList1 = []), this.addressList();
      this.show = false;
      if(res.data.status === 200){
        Notify({ type: 'success', message: '修改地址成功' });
      }
      else{
        Notify({ type: 'danger', message: '修改地址失败' });
      }
    },
    //发送新建地址请求
    async toChangeaddress2() {
      let data = {
        username: this.addressName2,
        telephone: this.addressTel2,
        province: this.addressProvince2,
        city: this.addressCity2,
        area: this.addressArea2,
        address: this.addressAreaxx2,
      };
      let res = await post("/address/saveOrUpdate", data);
      this.getAllAddressData();
      (this.addressList1 = []), this.addressList();
      this.show2 = false;
      if(res.data.status === 200){
        Notify({ type: 'success', message: '新增地址成功' });
      }
      else{
        Notify({ type: 'danger', message: '新增地址失败' });
      }
    },
    //新建地址底部弹出框
    newAddress() {
      this.show2 = true;
    },
  },
  created() {
    this.getAllAddressData(), this.addressList();
  },
};
</script>

<style scoped>
.newButton .van-button--info {
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  left: 15%;
  width: 70%;
}
</style>